﻿<html>
<head>
	<title>MoteJS Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="../styles.css"/>
	<script type="text/javascript" src="../lib/html.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../lib/raphael-min.js"></script>
	<script type="text/javascript" src="../mote.js"></script>
	<script type="text/javascript">
		$(function(){
			$("h1").after(Html.div({style:"font-style:italic; color:#ccc;"}, "Powered by MoteJS v.", Mote.version));
			
			var world = Mote.world($("#screen"), function(world, screen){
				world.gravity.groundPosition = 500;
				var ground = world.gravity.groundPosition;
				var width = screen.width;
				screen.rect(0, 0, screen.width, ground).attr({fill:"90-#eef-#cde", "stroke-width":0});
				screen.rect(0, ground, screen.width, screen.height-ground).attr({fill:"90-#8a4-#aba", "stroke-width":0});
				screen.path(["M0,",ground,"L",width,",",ground]);
			});
			world.reflect.top = false;

			for(var i=0; i<1; i++){
				world.add(Mote.solid([100 + i*80, 100], 19, function(screen, pos){
					return screen.image("creeper.png", pos.x, pos.y, 57, 164);
				})).fall();
			}

			world.add(Mote.solid([500, 100], 19, function(screen, pos){
				return screen.image("steve.png", pos.x, pos.y, 113, 249);
			})).fall();


			world.add(Mote.solid([700, 100], 19, function(screen, pos){
				var set = screen.set();
				set.push(
					screen.rect(pos.x+29, pos.y+5, 81, 79).attr({fill:"#e5ce84", "stroke-width":0}),
					screen.rect(pos.x+39, pos.y+30, 22, 16).attr({fill:"#fff", "stroke-width":0}),
					screen.rect(pos.x+77, pos.y+30, 22, 16).attr({fill:"#fff", "stroke-width":0}),
					screen.rect(pos.x+46, pos.y+33, 10, 8).attr({fill:"#000", "stroke-width":0}),
					screen.rect(pos.x+82, pos.y+34, 10, 8).attr({fill:"#000", "stroke-width":0}),

					screen.rect(pos.x+48, pos.y+67, 40, 6).attr({fill:"#000", "stroke-width":0}),
					screen.rect(pos.x+29, pos.y+5, 81, 16).attr({fill:"#7e461f", "stroke-width":0}),
					screen.rect(pos.x+29, pos.y+83, 81, 118).attr({fill:"#00ffff", "stroke-width":0}),
					screen.rect(pos.x+50, pos.y+82, 37, 14).attr({fill:"#e5ce84", "stroke-width":0}),
					screen.rect(pos.x+108, pos.y+81, 26, 94).attr({fill:"#e5ce84", "stroke-width":0}),
					screen.rect(pos.x+2, pos.y+82, 27, 94).attr({fill:"#e5ce84", "stroke-width":0}),
					screen.rect(pos.x+77, pos.y+202, 35, 98).attr({fill:"#0000ff", "stroke-width":0}),
					screen.rect(pos.x+28, pos.y+202, 36, 100).attr({fill:"#0000ff", "stroke-width":0}),
					screen.rect(pos.x+108, pos.y+81, 29, 30).attr({fill:"#00ffff", "stroke-width":0}),
					screen.rect(pos.x+2, pos.y+81, 29, 30).attr({fill:"#00ffff", "stroke-width":0}),
					screen.rect(pos.x+27, pos.y+288, 38, 15).attr({fill:"#000000", "stroke-width":0}),
					screen.rect(pos.x+76, pos.y+288, 38, 15).attr({fill:"#000000", "stroke-width":0}),
					screen.rect(pos.x+29, pos.y+172, 82, 35).attr({fill:"#0000ff", "stroke-width":0})
				);
				return set;
			})).fall();





			world.add(Mote.solid([900, 100], 19, function(screen, pos){
				return screen.image("zombie.png", pos.x, pos.y, 113, 249);
			})).fall();
			
			
		});
	</script>
</head>
<body>
	<h1>MoteJS Demo Page</h1>
	<div id="screen" style="border:1px solid #ccc; margin:5px; width:1200px; height:550px;"></div>
</body>
</html>